@import "../../style/variables.less";

@selectionSize: 5px;
@flagOutlineColor: rgba(0, 0, 0, .25);

.Picture {
    position: absolute;
    display: block;
    outline: @selectionSize solid transparent;
    transition: outline-color 0.2s ease-in;
    background-color: @blue-grey-400;  // Loading background
    user-select: none;

    &.isHighlighted {
        outline-color: @deep-orange-500;
    }
}

.Picture-thumbnail {
    pointer-events: none;  // Disable image dragging
    opacity: 1;
    transition: opacity 0.2s ease-in;

    .Picture.isLoading & {
        opacity: 0;
    }
}

.Picture-spinner,
.Picture-error {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}
.Picture-error {
    text-align: center;

    svg {
        margin-bottom: 15px;
    }

    &.isSmall {
        font-size: 12px;

        svg {
            margin-bottom: 5px;
        }
    }
}

.Picture-flag {
    position: absolute;
    right: 4px;
    bottom: 4px;

    font-size: 12px;
    color: red;
    text-shadow:
        -1px -1px 0 @flagOutlineColor,
        1px -1px 0 @flagOutlineColor,
        -1px 1px 0 @flagOutlineColor,
        1px 1px 0 @flagOutlineColor;
}
